<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>借钱贷</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/font/iconfont.css" />
    <script src="../../script/vue.min.js"></script>
    <script src="../../script/fastclick.js"></script>
    <style>
        .personal-box {
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f6f6fa;
        }

        .head-box {
            padding: 19px;
            padding-top:39px;
            background: #f6f6fa url('../../image/audit/back.png') no-repeat top center;
            background-size: 100%;
        }
        .head-title{
          color: #fff;
          font-size: 18px;
          margin-bottom: 30px;
          text-align: center;;
        }

        .head {
            position: relative;
            padding: 26px;
            background: #fff;
            border-radius: 6px;
            box-shadow: 0 0 10px 5px rgba(82, 82, 82, 0.1);
            overflow: hidden;
        }

        .head>img {
            position: absolute;
            left: 26px;
            top: 26px;
            display: block;
            float: left;
            width: 52px;
            height: 52px;
            overflow: hidden;
            border-radius: 50%;
        }

        .user-detail {
            height: 52px;
            padding-left: 72px;
            box-sizing: border-box;
            overflow: hidden;
        }

        .user-detail h1 {
            margin-top: 2px;
            font-size: 16px;
            font-weight: bold;
            color: #262626;
        }

        .user-detail p {
            margin-top: 2px;
            color: #5d5d5e;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
        }

        .main-box {
            background: #fff;
        }

        .main-box li {
            padding: 19px 24px;
            border-bottom: #f6f6fa solid 1px;
            overflow: hidden;
            background: url('../../image/audit/right.png') no-repeat right 24px center;
            background-size: 5px
        }

        .main-box li img {
            display: block;
            float: left;
            width: 19px;
            height: 19px;
        }

        .main-box li span {
            display: block;
            margin-left: 13px;
            float: left;
            font-size: 14px;
            color: #333;
            line-height: 19px;
        }

        .quit {
            padding: 14px;
            margin-top: 14px;
        }

        .quit-btn {
            width: 100%;
            height: 48px;
            background: #e5e5e5;
            border-radius: 24px;
            text-align: center;
            line-height: 48px;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div class="wrap-head" id="personal" v-cloak>
        <div class="personal-box">
            <div class="head-box">
                <p class="head-title">个人中心</p>
                <div class="head">
                    <img src="../../image/audit/head.png">
                    <div class="user-detail">
                        <h1 v-text="userData.name"></h1>
                        <p v-text="userData.detail"></p>
                    </div>
                </div>
            </div>
            <div class="main-box">
                <ul>
                    <li @click="goOther">
                        <img src="../../image/audit/about.png" alt="">
                        <span>关于我们</span>
                    </li>
                    <li @click="goQuestion">
                        <img src="../../image/audit/question.png" alt="">
                        <span>意见反馈</span>
                    </li>
                    <!-- <li  @click="goCantact">
                        <img src="../../image/audit/contact.png" alt="">
                        <span>商务合作</span>
                    </li> -->
                </ul>
            </div>
            <div class="quit">
                <div class="quit-btn" @click="exit">退出登录</div>
            </div>
        </div>
    </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script>
    apiready = function() {
        FastClick.attach(document.body);
        // api.addEventListener({
        //     name:'viewdisappear'
        // },function(){
        //
        // });
    }

    var vm = new Vue({
        el: '#personal',
        data: {
            userData: {
                name: '李先生',
                detail: '这位用户很懒，什么都没有留下~'
            }
        },
        methods: {
            exit: function() {
                $api.rmStorage('phone2')
                api.openWin({
                    name: 'login',
                    url: 'login.html',
                    slidBackEnabled: false
                });
            },
            goOther () {
              api.openWin({
                  name: 'about',
                  url: 'about.html'
              });
            },
            goCantact () {
              api.openWin({
                  name: 'wrapCantact',
                  url: 'wrapCantact.html'
              });
            },
            goQuestion () {
              api.openWin({
                  name: 'wrapQuestion',
                  url: 'wrapQuestion.html'
              });
            }
        },
        mounted: function() {
          this.userData.name = $api.getStorage('phone2');
        }
    })
    function funcGoto(){
      vm.userData.name = $api.getStorage('phone2');
    }
</script>

</html>
